<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <Child>
        <template slot-scope="props">
            <li>{{props.item}}</li>
        </template>
    </Child>
</div>
<script>
    var Child = {
        data:function(){
            return {
                list:[1,2,3,4]
            }
        },
        template:`<div>
                       <ul>
                           <slot
                           v-for="item of list"
                           :item="item">
                           </slot>
                       </ul>
                  </div>`
    };
    var vm = new Vue({
        el:"#app",
        components:{
          Child:Child
        },
        data:{},
        methods:{}
    });
</script>
</body>
</html>